在製作 Agent 之前我們要先畫一 個簡單的流程圖

流程圖的運作步驟：

1. 觸發階段：學生輸入與 Payload 封裝

• st.chat_input：學生在畫面輸入文字並送出。
• 組合 Payload：app.py 把學生輸入的訊息 (user_message)、目前編輯器裡的程式碼 (code)、主題與題目整合包成 payload。
• 設定 Thread ID：以 學號:主題 建立唯一的 thread_id，確保不同學生或不同主題之間的對話狀態相互獨立。
• 呼叫 Graph：執行 graph.invoke(payload, config) 將資料送入 LangGraph。

2. 執行階段：LangGraph 的兩個 Node 流轉

步驟 A：Tutor Node（導師節點）

• 呼叫 agents/tutor.py 中的 ask_tutor() 函式，背後調用 Gemini API。
• Gemini 回傳結構化的 JSON 資料（包含回覆文字 reply、卡關進展 progress、診斷出的觀念弱點 misconceptions）。
• 更新 State：更新對話歷史 (messages)、卡關輪數 (stuck_count)、提示等級 (hint_level) 等狀態。

步驟 B：Record Node（紀錄節點）

• 接收到 Tutor Node 更新後的 State，呼叫 store.py 的 record_misconceptions()。
• 將診斷出的觀念弱點非同步/同步寫入 Firestore 資料庫（路徑為 students/{學號}/misconceptions/{code}）。

3. 持久化階段：Checkpointer 儲存狀態

• 整條圖（Graph）執行到尾聲時，MemorySaver 會自動將這一輪更新後的完整 TutorState 序列化並存進指定的 thread_id 記憶體空間中。

4. 刷新階段：Streamlit Rerun 與畫面重繪

• st.rerun()：強迫 Streamlit 從第 1 行開始重新執行 app.py 腳本。
• 重繪側邊欄：呼叫 store.py: load_misconceptions()，從 Firestore 抓取剛寫入的最新弱點清單並渲染出統計數據。
• 重繪對話區：呼叫 graph.get_state(config).values，直接讀取剛剛 Checkpointer 存下的 messages 對話紀錄並印在畫面上。

完成結果長這樣：

目前導師 Agent 已經會看學生的程式碼，並且會把學生錯誤的觀念寫在資料庫裡面了，但還是有一些地方值得精進或改進，以後有機會再把它完整一點。